<template>
    <div>
      <el-input placeholder="搜索" v-model="searchText"></el-input>
      <el-button type="primary" @click="goToAddPage">新增名单</el-button>
      
      <!-- 分页列表 -->
      <el-table :data="blacklist" style="width: 100%">
        <el-table-column prop="userId" label="用户ID"></el-table-column>
        <el-table-column prop="org" label="机构"></el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
        <el-table-column prop="ip" label="IP地址"></el-table-column>
        <el-table-column prop="service" label="服务名"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="viewDetail(scope.row)">详情</el-button>
            <el-button @click="editItem(scope.row)">修改</el-button>
            <el-button @click="deleteItem(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        searchText: '',
        blacklist: [],
      };
    },
    methods: {
      goToAddPage() {
        this.$router.push('/add');
      },
      viewDetail(row) {
        this.$router.push(`/detail/${row.userId}`);
      },
      editItem(row) {
        this.$router.push(`/edit/${row.userId}`);
      },
      deleteItem(row) {
        // 删除操作
      },
    },
    mounted() {
      // 获取黑名单数据
      this.blacklist = this.$store.state.blacklist;
    },
  
  
      
   }; 
  </script>
  
  
  
  